* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
    font-family: 'Roboto', sans-serif;
    color: #CCC;
}

@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/roboto/Roboto-Regular.ttf");
}

@font-face {
  font-family: "LeagueSpartan";
  src: url("/assets/fonts/leagueSpartan/LeagueSpartan-Bold.otf");
}

body {
  background-color: #1c1d25;
}

h1,h3,h5, summary {
  font-family: 'LeagueSpartan', sans-serif;
}

h1 {
  font-size: 2.87em;
}

ul , a, i{
    text-decoration: none;
}

summary {
    cursor: pointer;
}

.state::after {
  font-weight: bold;
    content: "Estado ";
    position: relative;
    padding: 20px;
}

.state::before {
    content:" ";
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    border: #333 1px solid;
}

.standby:hover::after {
  content:"Estado: Standby";
}

.standby:before{
    background-color: yellow;
}

.closed:hover::after {
  content:"Estado: Closed";
}

.closed::before{
  background-color: red;
}

.main {
  position: relative;
  height: 100vh;
  width: 100%;
}

.bg {
  /* width: 100%; */
  height: 100%;
  /* position: absolute; */
}

.title {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 250px;
  font-size: 1.8em;
  z-index: 2;
  text-shadow: 
  0 0 5px #1c1d25,
  0 0 5px #1c1d25,
  0 0 10px #1c1d25,
  0 0 10px #1c1d25,
  0 0 15px #1c1d25,
  0 0 15px #1c1d25,
  0 0 20px #1c1d25,
  0 0 20px #1c1d25,
  0 0 30px #1c1d25,
  0 0 30px #1c1d25;

  /* padding-block: max(30%,300px);
  padding-inline: 300px;
  position: relative; */
}

.title *{
  color: white;
}

.parallaxShape {
  position: absolute;
  z-index: 2;
  filter: 
  drop-shadow(0 0 5px #1c1d25),
  drop-shadow(0 0 10px #1c1d25),
  drop-shadow(0 0 15px #1c1d25),
  drop-shadow(0 0 20px #1c1d25),
  drop-shadow(0 0 30px #1c1d25);
}

@media screen and (max-width: 920px) {
  h1 {
    font-size: 1.9em;
  }
  .title {
    /* padding-block: 50%; */
    /* padding-inline: 150px; */
    font-size: 1.5em;
    left: 200px;
  }

  /* .main{
    height: auto;
  } */
}

@media screen and (max-width: 700px) {

  .title {
    /* padding-inline: 100px; */
    font-size: .9em;
    left: 100px;
  }
}

.parallaxShape {
  width: 60px;
  display: initial;
}


/*///////////////////////////////////////////////////*/
/*ESTO NO EH MIO*/
/* # The Rotating Marker # */
details summary::-webkit-details-marker { display: none; }
summary::before {
  font-family: "Hiragino Mincho ProN", "Open Sans", sans-serif;
  content: "▶";
  position: absolute;
  top: 1rem;
  left: 0.8rem;
  transform: rotate(0);
  transform-origin: center;
  transition: 0.2s transform ease;
}
details[open] > summary:before {
  transform: rotate(90deg);
  transition: 0.45s transform ease;
}

/* # The Sliding Summary # */
details, 
details .content { 
  overflow: hidden;
  background-color: #292933;
  color:#CCC;
}
details summary {
  position: relative;
  z-index: 10;
}
@keyframes details-show {
  from {
    /* margin-top: -80%; */
    opacity: 0;
    transform: translateY(-100%);
  }
}
details > *:not(summary) {
  animation: details-show 500ms ease-in-out;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease-in-out;
  color: transparent;
  overflow: hidden;
}
details[open] > *:not(summary) { color: inherit; }

/* # Just Some Pretty Styles # */
body { font-family: "Open Sans", sans-serif; padding-bottom: 400px; }
img { max-width: 100%; }
p { 
  margin: 0; padding-bottom: 10px; 
  max-width: 80ch;
}
p:last-child { padding: 0; }
details {
  box-sizing: border-box;
  margin-top: 5px;
  width: min(70%,700px);
  /* background: white; */
}

header {
  display: flex;
  flex-flow: column;
  align-items: center;
}

header h3 {
  margin-right: auto;
  padding-inline: 20px;
  color: #CCC;
}

summary {
  border: 4px solid transparent;
  outline: none;
  padding: 1rem;
  display: block;
  background: #24242e;/*#666;*/
  color: #CCC;
  padding-left: 2.2rem;
  position: relative;
  cursor: pointer;
}
details[open] summary,
summary:hover {
  background: #31313e;
}
.content {
  padding: 10px;
  /* border: 2px solid #888; */
  border-top: none;
}


.clip  {
  width: fit-content;
  font-size: 3em;
  background: linear-gradient(90deg, rgba(138,138,138,1) 0%, rgba(138,138,138,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%);
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: parriba 1s ease 0s infinite;
  -webkit-animation: parriba 1s ease 0s infinite;
}

#circle1{
  top:15%;
  left:30%;
}
#circle2{
  bottom:10%;
  right:40%;
}
#triangle1{
  bottom:25%;
  right:20%;
}
#square1{
  top:20%;
  right:40%;
}
#cross1{
  bottom: 35%;
  left: 23%;
}

#triangle_bg svg ,#triangle_bg2 svg{
	width: 100%;
	height: 100vh;
}

#triangle_bg{
	/* background-color: burlywood; */
	position: absolute;
  width: 100%;
  height: 100vh;
}
#triangle_bg2{
	z-index: 1;
	position: absolute;
  width: 100%;
  height: 100vh;
}

.effects {
  display: flex;
  flex-flow: column;
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 1;
}

/* The container */
.checkbox-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color:rgba(187,187,187,.1);
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #24242e;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
  background-color: #292933;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
  background-color: transparent;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid rgba(187,187,187,.1);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.checkbox-container:hover {
  color: rgba(187,187,187,.3);
}

.checkbox-container:hover input:checked ~ .checkmark {
  color: rgba(187,187,187,.3);
}
.checkbox-container:hover input ~ .checkmark:after {
  border-bottom: solid rgba(187,187,187,.3);
  border-right: solid rgba(187,187,187,.3);
}